<template>
    <div class="Collectionlist">

        <!-- xzf -->
        <van-row>
            <van-col span="6">
                <van-image :src="itemData.comodity.pics[0]" width="100%"/>
                <!-- <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" /> -->
            </van-col>
            <van-col span="18">
                <div class="des">
                    {{itemData.comodity.des}}
                </div>
                <van-row class="c-bottom">
                    <van-col span="6" class="fitst-span">
                        {{itemData.group.g_type}}
                    </van-col>
                    <van-col span="6">
                        <span class="price">{{itemData.group.g_price}}</span>
                    </van-col>
                    <van-col span="6">
                        <div class="tuan" @click="toProducts">{{state}}</div>
                    </van-col>
                    <van-col span="6">
                        <van-icon class="my-icon" color="#ff9c2a" :name="star" size="20" @click="cancelStar"/>
                    </van-col>
                </van-row>
            </van-col>
        </van-row>

        <!-- 左 -->
        <!-- <div class="listLeft1">
            <img :src="itemData.comodity.pics[0]" alt="">
        </div> -->

        <!-- 右 -->
        <!-- <div class="listRight1">
            <h5>{{itemData.comodity.des}}</h5>
            <div class="btn">
                <span>{{itemData.group.g_type}}</span>
                <span class="price">{{itemData.group.g_price}}</span>
                <div class="tuan" @click="toProducts">{{state}}</div>
            </div>
            <van-icon class="my-icon" :name="star" size="20" @click="cancelStar"/>
        </div> -->
    </div>
</template>

<script>
export default {
    name:'CollectionItem',
    data:function() {
        return {
            star:'star'
        }
    },
    props:['itemData'],
    computed: {
        state:function(){
            if(this.itemData.group.g_condition == 0){
                return '拼团中'
            }else if(this.itemData.group.g_condition == 1){
                return '已成功'
            }else{
                return '失败'
            }
        }
    },
    methods: {
        cancelStar() {
            // console.log(this.itemData)
            this.star='star-o'
            this.$emit('faCancel',this.itemData.id) // 请求成功后触发该事件
        },
        toProducts (){
            this.$router.push({
                path:'/productDetails',
                params:{
                    id:1
                }
            })
        },
       
    }
}
</script>


<style scope> 
/* ff9c2a */
.Collectionlist {
    margin: 10px;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #aaa;
}
.des {
    padding: 5px 0;
    color:#333;
    font-size: 13px;
}
.c-bottom {
    text-align: center;
}
.first-span {
    text-align: left;
}
.price {
    color: red;
    font-weight: 550;
}
.tuan {
    background-color: #ff9c2a;
    color: #fff;
    border-radius: 3px;
}
</style>
